<template>
	<view class="order-detail">
		<view class="order-info">
			<view class="order-row">
				<view class="label">工作状态</view>
				<uv-text :text="statusType(orderInfo.status)" :color="statusColor(orderInfo.status)" size="28rpx" />
			</view>
			<view class="order-row">
				<view class="label">发起人员</view>
				<uv-text :text="orderInfo.createByNickName" color="#212121" size="28rpx" lines="1" />
			</view>
			<view class="order-row">
				<view class="label">提交时间</view>
				<uv-text :text="orderInfo.createTime" color="#212121" size="28rpx" />
			</view>
		</view>
		<view class="order-info" :style="{
        marginBottom: functionList.length > 0 ? '160rpx' : '40rpx',
      }">
			<g-steps v-if="orderInfo.createTime" :steps="stepsList" direction="row"
				:dot-color="[3, 8, 9, 11, 14].includes(orderInfo.status) ? '#FF3B30' : '#4EA770'"
				:current="[3, 7, 8, 9, 11, 14].includes(orderInfo.status) ? 1 : 0" stepsId="order-steps">
				<template #step1>
					<view class="step-tips">已等待{{
              getTimeDistance(
                orderInfo.createTime,
                orderInfo.status == 3 ? orderInfo.auditTime : orderInfo.overTime
              )
            }}</view>
				</template>
			</g-steps>
			<g-tabs-top :list="tabList" v-model:current="current" sticky :col="4" @change="onReach = false" />
			<Trends v-if="current === 0" :orderId="orderInfo.id" />
			<Detail v-if="current === 1" :info="orderInfo" />
			<Comment v-if="current === 2" :orderId="orderInfo.id" v-model:onReach="onReach" />
			<Annex v-if="current === 3" :info="orderInfo" />
			<view class="func_btn" v-if="functionList.length > 0 && [0, 1].includes(current)">
				<view class="btn_con" v-for="(i, k) in functionList" :key="k" @click="handleCommand(i)">
					<uv-icon :name="i.icon" size="40rpx" :label="i.label" label-size="24rpx" label-color="#212121"
						label-pos="bottom" space="10rpx" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onBeforeUnmount
	} from "vue";
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getTimeDistance
	} from "@/common/mothed";
	import Trends from "@/pages/Order/cp/Trends.vue"; // 动态
	import Detail from "@/pages/Order/cp/Detail.vue"; // 详情
	import Comment from "@/pages/Order/cp/Comment.vue"; // 评论
	import Annex from "@/pages/Order/cp/Annex.vue"; // 附件
	import {
		isOperate,
		getOrderDetail,
		addOrderRecord
	} from "@/request/order";

	import iconRevoke from "@/static/order/icon_revoke.png"; // 转回机构处理
	import iconAgree from "@/static/order/icon_agree.png"; // 复验通过
	import iconRefuse from "@/static/order/icon_refuse.png"; // 复验不通过
	import iconEdit from "@/static/order/icon_edit.png"; // 编辑
	import iconDelete from "@/static/order/icon_delete.png"; // 删除工单

	const orderId = ref(""); // 工单id
	const orderInfo = ref({}); // 工单详情
	const stepsList = ref([
		{ label: "发起工单" },
		{ label: "处理完成" }
	]);
	const onReach = ref(false); // 是否触底

	const statusList = ref([
		{ label: "待负责人审批", value: 1, color: "#212121" },
		{ label: "待业主审批", value: 2, color: "#212121" },
		{ label: "被退回", value: 3, color: "#FF3B30" },
		{ label: "重新发起", value: 4, color: "#212121" },
		{ label: "维修接单", value: 5, color: "#212121" },
		{ label: "维修结束", value: 6, color: "#4EA770" },
		{ label: "已完结", value: 7, color: "#4EA770" },
		{ label: "复验不通过", value: 8, color: "#FF3B30" },
		{ label: "撤销工单", value: 9, color: "#212121" },
		{ label: "任务发布", value: 10, color: "#212121" },
		// { label: "业主退回", value: 11, color: "#FF3B30" },
		// { label: "转回机构处理", value: 12, color: "#212121" },
		// { label: "待二次复验", value: 13, color: "#212121" },
		// { label: "二次复验不通过", value: 14, color: "#FF3B30" },
	]); // 状态列表
	const current = ref(0); // 选中tab栏
	const tabList = ref([
		{ label: "工单动态" },
		{ label: "工单详情" },
		{ label: "评论列表" },
		{ label: "相关附件" },
	]);
	const functionList = ref([]);	// 功能按钮列表

	onLoad((e) => {
		orderId.value = e.id;
	});

	onMounted(async () => {
		await getData();
		getFunctionList()
		uni.$on("order", async () => {
			uni.$emit("orderCount");
			await getData();
			getFunctionList()
		});
	})

	onBeforeUnmount(() => {
		uni.$off("order");
	});

	onReachBottom(() => {
		onReach.value = true;
	});

	// 获取功能按钮列表
	const getFunctionList = async () => {
		let list = [];
		const { status } = orderInfo.value;
		const { data } = await isOperate({ id: orderId.value });
		// if (status == 2) {
		// 	list.push({
		// 		label: "审批通过",
		// 		icon: iconAgree,
		// 		type: 10
		// 	});
		// 	list.push({
		// 		label: "转回机构处理",
		// 		icon: iconRevoke,
		// 		type: 12
		// 	});
		// }
		// if (status == 2 && data) {
		// 	list.push({
		// 		label: "退回工单",
		// 		icon: iconRefuse,
		// 		type: 11
		// 	});
		// }
		// if (status == 3) {
		// 	list.push({
		// 		label: "编辑",
		// 		icon: iconEdit,
		// 		type: 0
		// 	});
		// 	list.push({
		// 		label: "删除工单",
		// 		icon: iconDelete,
		// 		type: 9
		// 	});
		// }
		if (status == 6 && data) {
			list.push({
				label: "复验通过",
				icon: iconAgree,
				type: 7
			});
			list.push({
				label: "退回工单",
				icon: iconRefuse,
				type: 8
			});
		}
		if (status == 10) {
			list.push({
				label: "删除工单",
				icon: iconDelete,
				type: 9
			});
		}
		// if (status == 13 && data) {
		// 	list.push({
		// 		label: "复验通过",
		// 		icon: iconAgree,
		// 		type: 7
		// 	});
		// 	list.push({
		// 		label: "退回工单",
		// 		icon: iconRefuse,
		// 		type: 14
		// 	});
		// }
		functionList.value = list;
	}

	// 获取工单详情
	const getData = async () => {
		const res = await getOrderDetail(orderId.value)
		if (res.code == 200) {
			orderInfo.value = res.data;
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: orderInfo.value.title,
			});
		}
	};

	// 状态类型
	const statusType = (status) => {
		let type = statusList.value.find((item) => item.value == status);
		return type?.label;
	};

	// 状态颜色
	const statusColor = (status) => {
		let type = statusList.value.find((item) => item.value == status);
		return type?.color;
	};

	// 功能事件
	const handleCommand = (item) => {
		switch (item.type) {
			case 0:
				// 编辑
				uni.navigateTo({
					url: `/pages/Order/addOrder?id=${orderInfo.value.id}`,
				});
				break;
			case 7:
				// 第二次复验通过
			case 13:
				// 第一次复验通过
			case 10:
				// 审批通过
				uni.navigateTo({
					url: `/pages/Order/orderPass?type=${item.type}&id=${orderInfo.value.id}`,
				});
				break;
			case 8:
				// 第一次复验拒绝
			case 11:
				// 业主退回
			case 12:
				// 转回机构处理
			case 14:
				// 第二次复验拒绝
				uni.navigateTo({
					url: `/pages/Order/outOrder?type=${item.type}&id=${orderInfo.value.id}`,
				});
				break;
			case 9:
				// 删除工单（撤销工单）
				uni.showModal({
					title: "删除工单",
					content: "确定删除该工单吗？",
					showCancel: true,
					success: ({
						confirm
					}) => {
						if (confirm) {
							addOrderRecord({
								workOrderId: orderInfo.value.id,
								type: item.type,
							}).then((res) => {
								if (res.code == 200) {
									uni.$emit("orderCount")
									uni.showToast({
										title: "删除成功",
										icon: "none",
										duration: 2000,
									});
									uni.navigateBack();
								}
							});
						}
					},
				});
				break;
			case 12:
				// 转回机构处理
				uni.navigateTo({
					url: `/pages/Order/orderPass?type=${item.type}&id=${orderInfo.value.id}`,
				});
				break;
		}
	};
</script>

<style lang="scss" scoped>
	.order-detail {
		padding: 30rpx;

		.order-info {
			width: auto;
			background: #fff;
			box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 160rpx;
			}

			.order-row {
				display: flex;
				height: 100rpx;
				align-items: center;
				padding: 0 20rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.label {
					width: 180rpx;
					font-size: 28rpx;
					text-align: center;
					color: #757575;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.step-tips {
		position: absolute;
		left: 0;
		top: 60rpx;
		width: 630rpx;
		text-align: center;
	}

	.func_btn {
		position: fixed;
		left: 40rpx;
		right: 40rpx;
		bottom: 40rpx;
		z-index: 9;
		height: 120rpx;
		background: #ffffff;
		box-shadow: 0 0 30rpx 2rpx rgba(94, 94, 94, 0.16);
		border-radius: 60rpx;
		display: flex;
		align-items: center;

		.btn_con {
			flex: 1;
			text-align: center;
			border-right: 1rpx solid #dedede;

			&:last-child {
				border-right: none;
			}
		}
	}
</style>